<template>
  <div class="index-page">

    <xdh-map :zoom="15" :center="mapCenter" type="Amap" ref="testMap"  @ready="mapInit" :layer-config="layerConfig">
      <!-- <xdh-map-image v-for="(item, index) in points" :key="`img_${index}`" :position="item" :src="pointImg">
      </xdh-map-image>  -->
      
      
      <xdh-map-geo v-if="state" ref="geo" :state="state" :draw-define="drawDefineFn" @click="areaClick"></xdh-map-geo>

      

      <xdh-map-tooltip class="test-map-tooltip"  v-for="(item, index) in popups" :key="`tool_${index}`" ref="popup"  :position="item.point"
      :offset="[0,-25]" v-show="item.data"  >
        <div @click="tagClick(item)" slot="content" style="padding: 0 3px; font-size:10px;line-height: 1.2;text-align: center">{{item.data && item.data.evacuated}}户/共{{item.data && item.data.total}}户</div>
      </xdh-map-tooltip>
    </xdh-map>
  </div>

</template>

<script>
// import macau from '../../public/geo/test.json'
import {parseStyle} from 'xdh-map'
import {mapState} from 'vuex'
import axios from '@/utils/axios'
// import { transform, WGS84, GCJ02 } from 'gcoord'
const DEPLOY_URL = window.__config__.DEPLOY_URL
const MAP_SERVER = window.__config__.MAP_HOST
const GEOJSON_NAME = window.__config__.GEOJSON_NAME_1
const API_HOST = window.__config__.API_HOST
const pointImg = 'img/point.png'
const Style = function(obj) {
  return parseStyle({
    className: 'Style',
    fill: {
      className: 'Fill',
      color: 'transparent'
    },
    stroke: {
      className: 'Stroke',
      lineDash: [5, 5],
      color: 'red',
      width: 1
    },
    text: {
      className: 'Text',
      text: obj.properties.areaName,
      font: '14px sans-serif',
      stroke: {
        className: 'Stroke',
        width: 0,
        color: 'red'
      },
      fill: {
        className: 'Fill',
        color: 'red'
      }
    }
  })
}

export default {
  data() {
    return {
      olMap: null,
      viewer: null,
      state: null, // macau,
      layerConfig: {
        Amap: {
          title: '高得地图',
          server: MAP_SERVER
        }
      },
      mapCenter: [113.54680227986877, 22.189260975262872],
      pointImg: pointImg, // require('../assets/img/point.png'),
      popups: [], 
      points: [],

      areaCount: [],
      res: ''
    }
  },
  computed: {
    ...mapState({
      authorKey: 'authorKey'
    })
  },
  watch: {
    authorKey(val) {
      if (val) {
        this.fetchMapData()
      }
    }
  },
  methods: {
    tagClick(data) {
      // console.log(JSON.stringify(data.data))
      if (window.JSInterface) {
        let targetArea = JSON.stringify(data.data)
        window.JSInterface.htmlMapClick(targetArea)
      }
    }, 
    areaClick(data, e, feature) {
      let nowZoom = this.viewer.getZoom() + 1
      let zoom = nowZoom >= 18 ? 18 : nowZoom
      this.viewer.animate({
        center: feature.getGeometry().getInteriorPoint().getCoordinates(),
        duration: 500,
        zoom: zoom
      })
      // console.log(JSON.stringify(this.areaCount.find((item) => { return item.areaId === data.properties.areaId })))
      if (window.JSInterface) {
        if (!this.areaCount.length) return
        let targetArea = JSON.stringify(this.areaCount.find((item) => { return item.areaId === data.properties.areaId }))
        window.JSInterface.htmlMapClick(targetArea)
      }
    },
    mapInit(map, vm) {
      this.olMap = map
      this.viewer = this.olMap.getView()
      this.viewer.on('change', (e) => {
        console.log(e.target.getCenter())
      })
    },
    drawDefineFn(feature, obj) {
      let center = feature.getGeometry().getInteriorPoint()
      this.popups.push({
        point: center.getCoordinates(),
        properties: obj.properties,
        data: null
      })
      feature.setStyle(Style(obj))
    },
    fetchMapData() { // 调取接口函数this.$store.dispatch('GET_STATISTICS')
      axios({
        methods: 'get',
        url: API_HOST + '/api/v1/commander/statistics',
        headers: {
          Authorization: this.authorKey
        }
      }).then((res) => {
        if (!res.data || res.data.status !== 0) return
        let result = res.data.data
        if (!this.popups.length) { return }
        this.areaCount = result.areaCount 
        result.areaCount.forEach((item, index) => {
          let targetId = item.areaId
          let targetPop = this.popups.find((pop) => { return pop.properties.areaId === targetId })
          if (targetPop) {
            targetPop.data = item  
          }
        })
      })
    },
    fetchMapPoint() {
      axios({
        methods: 'get',
        url: API_HOST + '/api/v1/units/blockPosition',
        headers: {
          Authorization: this.authorKey
        }
      }).then((res) => {
        if (!res.data || res.data.status !== 0) return 
        let result = res.data.data
        
        this.points = result.map((item) => {
          return [item.rallyPointLat, item.rallyPointLng]
        })
        // console.log(this.points)
        // console.log('center', this.mapCenter)
      })
    }
  },
  mounted() {
    axios({
      methods: 'get',
      url: DEPLOY_URL + '/geo/' + GEOJSON_NAME
    }).then((res) => { 
      this.state = res.data // transform(res.data, WGS84, GCJ02)
      if (this.authorKey) {
        setTimeout(() => {
          this.fetchMapData()
          // this.fetchMapPoint()
          // console.log(this.popups)
        }, 200) 
      }
    })
  }
}
</script>

<style scoped lang="scss">
  .index-page {
    // width: 100%;
    height: 100%;
    // border: 1px solid red;
    .xdh-map-tooltip.test-map-tooltip.is-light{
      color: white;
      background: #44A4F8;
      &::after{
          border-top: 12px solid #44A4F8;
      }
      /deep/ .xdh-map-popup__body{
        padding: 0;
      }
    }
  }
</style>
